<template>
<!-- 右一上box -->
  <HerinContainer class="MainCoal-box" :delay="1" direction="Right" title="电机运行监测">
    <template #content>
      <div slot="tab" class="MainCoal-box-tab">
        <div
        class="text-box"
        v-for="(item) in OperationList"
        :key="item.index"
        :class="['item', setclass(item.itemstate)]"
        >
          <div class="little-box-title">
            <span style="font-size:14px;color:#D8D8D8;">{{item.name}}</span>
            <span class="tag" :class="['tag', setclass(item.itemstate)]">{{item.itemstate}}</span>
          </div>
          <!-- 电流 -->
          <div class="little-box-title">
            <div><img src="@/assets/img/dispath/gongtong1.png" alt=""></div>
            <div style="font-size:12px;color:#D8D8D8;">{{ item.electriccurrent }}A</div>
            <div class="column">
              <div
                class="inner"
                :style="{
                  width: (item.electriccurrent / electriccurrentmax) * 100 + '%',
                }"
              /></div>
            </div>
          <div class="little-box-title">
            <div><img src="@/assets/img/dispath/gongtong2.png" alt=""></div>
            <div style="font-size:12px;color:#D8D8D8;">{{ item.temperature }}℃</div>
            <div class="column">
              <div
                class="inner"
                :style="{
                  width: (item.temperature / temperaturemax) * 100 + '%',
                }"
              /></div>
          </div>
        </div>
      </div>
    </template>
  </HerinContainer>
</template>
<script>
import HerinContainer from '@/components/HerinContainer';

export default {
  components: {
    HerinContainer
  },
  data() {
    return {
      OperationList: [
        {
          name: '左滚筒',
          itemstate: '运行',
          electriccurrent: '16',
          temperature: '42'
        },
        {
          name: '右滚筒',
          itemstate: '运行',
          electriccurrent: '32',
          temperature: '42'
        },
        {
          name: '左油泵',
          itemstate: '停止',
          electriccurrent: '48',
          temperature: '42'
        },
        {
          name: '右油泵',
          itemstate: '停止',
          electriccurrent: '48',
          temperature: '42'
        },
        {
          name: '左牵引',
          itemstate: '故障',
          electriccurrent: '48',
          temperature: '42'
        },
        {
          name: '右牵引',
          itemstate: '故障',
          electriccurrent: '48',
          temperature: '42'
        }
      ]
    };
  },
  mounted() {
    // console.log(this.electriccurrentmax);
  },
  computed: {
    electriccurrentmax() {
      const list = JSON.parse(
        JSON.stringify([...this.OperationList])
      );
      return (
        list.sort((a, b) => b.electriccurrent - a.electriccurrent)[0].electriccurrent || 1
      );
    },
    temperaturemax() {
      const list = JSON.parse(
        JSON.stringify([...this.OperationList])
      );
      return (
        list.sort((a, b) => b.temperature - a.temperature)[0].temperature || 1
      );
    }
  },
  methods: {
    setclass(val) {
      if (val === '运行') {
        return 'green';
      } else if (val === '停止') {
        return 'lightGrey';
      } else {
        return 'red';
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.MainCoal-box{
  margin-bottom: .625rem;
  .MainCoal-box-tab{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: space-between;
    height: 20.9375rem;
    .text-box{
      height: 6.5625rem;
      width: 9.375rem;
      background-color: rgba(255, 255, 255, 0.2);
      border-radius: .25rem;
      padding: 0 .625rem;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
      .little-box-title{
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .little-box-title{
        .tag {
            display: inline-block;
            margin-left: 0.625rem;
            width: 3.75rem;
            height: 1rem;
            line-height: 1rem;
            text-align: center;
            font-size: $auxiliaryText;
          }
        .column {
          padding: 0.1875rem;
          border: 0.0625rem solid $green;
          box-sizing: border-box;
          width: 4.5rem;
          height: 1rem;
          background-color: rgba($color: $green, $alpha: 0.25);
        .inner {
            height: 100%;
          }
        }
      }

      &.green {
          .tag {
            color: $green;
            background-color: rgba($color: $green, $alpha: 0.25);
          }
          .little-box-title .column {
            border: 0.0625rem solid $green;
            background-color: rgba($color: $green, $alpha: 0.25);
            .inner {
              background-color: $green;
            }
          }
        }
      &.red {
          .tag {
            color: $red;
            background-color: rgba($color: $red, $alpha: 0.25);
          }
          .little-box-title .column {
            border: 0.0625rem solid $red;
            background-color: rgba($color: $red, $alpha: 0.25);
            .inner {
              background-color: $red;
            }
          }
        }
      &.lightGrey {
          .tag {
            color: $lightGrey;
            background-color: rgba($color: $lightGrey, $alpha: 0.25);
          }
          .little-box-title .column {
            border: 0.0625rem solid $lightGrey;
            background-color: rgba($color: $lightGrey, $alpha: 0.25);
            .inner {
              background-color: $lightGrey;
            }
          }
        }
    }
  }
}

</style>
